/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-02-23 18:03:54
 * @LastEditTime: 2021-02-27 08:10:25
 * @LastEditors: Zhang Zhaoda
 */

import { FC, useState, useEffect, useRef } from "react"
import axios from 'axios';
// import LazyLoad from "react-lazyload";
import './official.scss';
import BScroll from 'better-scroll';
import { Idata, Iobj, BrandListType,TypeList } from '../../interface/official.d';
import "animate.css";
interface Istate {
  history:any
}

const Offcial:FC<Istate>=function(props){
  
  const [typeList,setTypeList] = useState({typeList:[]});//右侧弹框数据

  const [flag,setFlag] = useState('false');//弹框开关

  const [id,setId] = useState('9');

  const [data, setData] = useState<Idata>({list:[],tit:[],scroll:{}});

  const carbrand:any = useRef(null);

  const carbox:any = useRef(null);

  const slideInRight:any = useRef(null);

  const goList = (id:string) => {
    setFlag('true');
    setId(id);
  }

  const close = () => {
    setFlag('false')
  }

  //跳转到car页面
  const goCar = (id:string)=>{
    // console.log(id);
    props.history.push(`/car/${id}`);
  }

  useEffect(() => {
    axios.get('api/v2-car-getMasterBrandList.html').then(res => {
        let obj:Iobj = {};
        res.data.data.forEach((item: Iobj) => {
            let firstWord = item.Spelling.substring(0,1);
            // console.log(firstWord);
            if(obj[firstWord]) {
              obj[firstWord].push(item)
            } else{
              obj[firstWord] = [];
              obj[firstWord].push(item)
            }
        })
        // console.log(obj);
        setData((prev:Idata) => {
          return {
            scroll: prev.scroll,
            list: obj,
            tit: Object.keys(obj)
          }
        })
    })

    setTimeout(() => {
      setData(prev => {
        return {
          ...prev,
          scroll: new BScroll(carbrand.current,{
            scrollY: true,
            click: true
          })      
        }
      })
    },1000)

    axios.get('/api//v2-car-getMakeListByMasterBrandId.html')

  }, []);

  const scrollTo = (index: number) => {
    data.scroll.scrollToElement((carbox.current as HTMLDivElement).children[index],1000,0,0)
    // console.log(object)
  }

  useEffect(() => {
    axios.get('api/v2-car-getMakeListByMasterBrandId.html',{params:{MasterID:id}}).then(res => {
      setTypeList({typeList: res.data.data})
    })
  },[id])
  
  return (
    
    <div className="offcial">
      <div className="car-brand" ref={carbrand}>
        <div className="car-box" ref={carbox}>
          {
            data.tit.map((item,index) => {
              return (
                <div
                  key={index}>
                  <p>{item}</p>
                  <ul>
               
                    {
                      data&&data.list&&data.list[item].map((i: BrandListType,d: number) => {
                        return (
                          <li onClick={() => goList(i.MasterID)} key={d}>
                              <img src={i.CoverPhoto} alt=""/>
                            <span>{i.Name}</span>
                          </li>
                        )
                      })
                    }
                  </ul>
                </div>
              )
            })
          }
        </div>
      </div>

      <div className="letter" id="letter">
        {
          data.tit.map((item,index) => {
            return (
              <ul key={index}>
                <li onClick={() => scrollTo(index)}>{item}</li>
              </ul>
            )
          })
        }
      </div>

      {/* 右侧弹框 */}
      
        <div 
        ref={slideInRight} 
        id='carType'
        className="animate__animated animate__fadeInRight"
        style={{display: flag==='false' ? 'none' : 'block'}}>
          <div 
            className="typeList"
            onClick={close}
            style={{display: flag === 'false' ? 'none' : 'block'}}
            >
            {
              typeList.typeList.map((item:TypeList) => {
                return (
                  <div 
                    key={item.GroupId}>
                    <p className="p">{item.GroupName}</p>
                    <ul>
                      {
                        item.GroupList ? item.GroupList.map(item => {
                          return (
                            <li
                              key={item.SerialID}>
                              <img src={item.Picture} alt=""/>
                              <div
                                onClick={() => goCar(item.SerialID)}>
                                <p>{item.AliasName}</p>
                                <p>{item.DealerPrice}</p>
                              </div>
                            </li>
                          )
                        }) : ''
                      }
                    </ul>
                  </div>
                )
              })
            }
          </div>
      </div>
      
    </div>
  )
}
export default Offcial;
